<template>
  <div class="home">
    <div class="topbar">topbar</div>
    <div class="top-nav bg-primary flex ai-center jc-around  text-white fs-md">
      <div class="nav-item active">
        <router-link class="text-center nav-link" tag="div" to="/">首页</router-link>
      </div>
      <div class="nav-item  ">
        <router-link class="text-center nav-link" tag="div" to="/">攻略中心</router-link>
      </div>
      <div class="nav-item  ">
        <router-link class="text-center nav-link" tag="div" to="/">赛事中心</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  components: {},
};
</script>

<style lang="scss">
.topbar {
  height: 2rem;
  position: sticky;
  top: 0;
  background: red;
  z-index: 99;
}

.top-nav {
  height: 3.5rem;
  .nav-item {
    border-bottom: 3px solid transparent;
    &.active {
      border-bottom: 3px solid #ffffff;
    }
  }
}
</style>
